<template>
  <div>
    <el-card class="box-card">
      <div slot="header">
        <!-- 表单搜索操作栏 -->
        <el-form :inline="true" :model="search" class="demo-form-inline" size="mini">

          <el-form-item>
            <el-input v-model="search.name" placeholder="关键字"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="getTableData">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'id', order: 'ascending' }">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="用户名">
                  <span>{{ props.row.UserName }}</span>
                </el-form-item>
                <el-form-item label="头像" width="80">
                  <template #default="{ row }">
                    <el-avatar :src="imgbase + props.row.Path"></el-avatar>
                  </template>
                </el-form-item>
                <el-form-item label="账号">
                  <span>{{ props.row.LoginName }}</span>
                </el-form-item>
                <el-form-item label="会员 ID">
                  <span>{{ props.row.UserID }}</span>
                </el-form-item>
                <el-form-item label="性别">
                  <span>{{ props.row.Sex }}</span>
                </el-form-item>
                <el-form-item label="生日">
                  <span>{{ props.row.Birthday }}</span>
                </el-form-item>
                <el-form-item label="电话号码">
                  <span>{{ props.row.Phone }}</span>
                </el-form-item>
                <el-form-item label="状态">
                  <span>{{ props.row.Status }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="会员ID" prop="UserID" sortable>
          </el-table-column>
          <el-table-column label="用户名" prop="UserName" sortable>
          </el-table-column>
          <el-table-column prop="Path" label="头像" width="80">
            <template #default="{ row }">
              <el-avatar :src="imgbase + row.Path"></el-avatar>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <br>
      <!-- 分页 -->
      <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange"
        :hide-on-single-page="autoHide" :page-sizes="[5, 10, 20, , 50, 100]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="totalNum" background>
      </el-pagination>
    </el-card>
  </div>

</template>

<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

<script>
import basepath from '../../plugins/base.js'
export default {
  name: 'vipreportform',
  data() {
    return {
      search: {
        name: ''
      },
      pageIndex: 1,  //当前的 页码
      pageSize: 5,   //每页条数
      totalNum: 0,   //总数量
      autoHide: false,  //当只有一页数据时是否隐藏分页
      tableData: [],
    }
  },
  methods: {
    //获取数据data
    getTableData() {
      this.loading = true;
      this.axios({
        method: 'get',
        url: 'vippage',
        params: { page: this.pageIndex, limit: this.pageSize, name: this.search.name },
        data: {}
      }).then(response => {
        console.log('response: ', response);

        this.tableData = response.data;
        this.totalNum = response.count;
        setTimeout(() => {
          this.loading = false;
        }, 200);
      })
    }
    //复选框选中
    , handleSelectionChange(val) {
      this.multipleSelection = val;
    }
    //分页
    , handleCurrentChange(val) {
      this.pageIndex = val;
      this.getTableData();
    }
    //切换每页数量
    , handleSizeChange(val) {
      this.pageSize = val;
      this.getTableData();
    }
    //文字搜索 高亮效果
    , highlight(v) {
      return v.replace(this.search.name, '<span class="highlight">' + this.search.name + '</span>')
    }

  },
  created() {
    this.imgbase = basepath.imgUrl;
    this.getTableData();
  },
}
</script>